<template>
  <div>
    <list-title title="每日歌曲推荐"></list-title>
    <mu-circular-progress
      :size="90"
      color="red"
      v-if="loading"
      class="loading"
    />
    <music-list :songs="recommend" v-else></music-list>
  </div>
</template>

<script lang="ts">
import listTitle from "../../components/listTitle.vue";
import musicList from "../../components/musicList.vue";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { APIType } from "@/api";
import { MusicInfo } from "@/model/music-info.model";
@Component({
  components: {
    musicList,
    listTitle,
  },
})
export default class RecommendSongsComponent extends Vue {
  recommend: MusicInfo[] = [];
  loading = true;
  $api: APIType;
  $router: Router;
  mounted() {
    this.$api.getRecommendSongs().then((res) => {
      this.recommend = res?.recommend ?? [];
      this.loading = false;
    });
  }
  back() {
    this.$router.go(-1);
  }
}
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
